<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <script src="../js/jquery-1.8.3.js"></script>
</head>
<body>
<!--添加表格表单  start ---------->
`   <form class="layui-form" id="addForm"  style="display: none;padding: 5px 20px 0px  0px">
    <div class="layui-form-item">
        <label class="layui-form-label">管理员名</label>
        <div class="layui-input-block">
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">管理员密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!----------添加表格表单  end  --------->


<!--修改表格表单  start ---------->
    <form class="layui-form" id="updateForm" lay-Filter="updateFormFilter" style="display: none;padding: 5px 20px 0px  0px">

    <div class="layui-form-item">
        <label class="layui-form-label">管理员名</label>
        <div class="layui-input-block">
            <input type="hidden" name="id" >
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">管理员密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!----------修改表格表单  end  --------->
<div>
    <button id="deleteAll" class="layui-btn">删除选中</button>
    <button id="add" class="layui-btn">添加</button>
</div>

<table  id="demo" lay-filter="tableFilter"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>


<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script >
    layui.use(['table','form','layer'], function(){
        var table = layui.table;
        var form = layui.form;

        var  layer=layui.layer;
        //日期组件
        //表格动态展示
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,url: '${pageContext.request.contextPath}/admin/selectAll' //数据接口
            ,page: true //开启分页
            ,limit:10
            ,limits:[5,10]
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'}
                ,{field: 'id', title: '管理员编号', width:100, sort: true}
                ,{field: 'username', title: '管理员名', width:150, sort: true}
                ,{field: 'password', title: '管理员密码', width:100, sort: true}
                ,{title:'操作',toolbar:'#barDemo'}

            ]]
        });
        //---条件查询 start----
        $("#ch").click(function () {

            table.reload('demo', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: $("[name=name1]").val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据

        });

        $("#add").click(function () {
            layer.open({
                type:1
                ,title:'添加页面'
                ,content:$("#addForm")
            })
        })
        //-----添加功能  start------

        //监听提交
        form.on('submit(addSubmit)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:'${pageContext.request.contextPath}/admin/insert'
                ,data:$("#addForm").serialize()
                ,success:function(result){
                    if(result.flag){
                        layer.closeAll();//关闭添加界面的弹出层
                        $("#addForm")[0].reset();//使用js中的reset方法清空表单中的数据
                        layer.msg("添加成功!!!!");
                        table.reload("demo")//重载表格
                    }else{
                        layer.msg("添加异常!!!!")
                    }
                }
            })
            return false;
        });
        //------添加功能end-----

        //table事件监听器  控制监听  编辑和删除
        table.on('tool(tableFilter)',function (obj) {
            var data=obj.data;

            console.log(data)
            if (obj.event=='edit'){
                layer.open({
                    type:1
                    ,title:'修改页面'
                    ,content:$("#updateForm")

                })

                $.ajax({
                    url:'${pageContext.request.contextPath}/admin/selectOne'
                    ,data:'id='+obj.data.id
                    ,dataType:'json'
                    ,success:function (result) {

                        form.val('updateFormFilter',result)
                    }
                })
            }else if(obj.event=='del'){
                layer.confirm('确定要删除吗,亲!',function (index) {
                    $.ajax({
                        url:'${pageContext.request.contextPath}/admin/delete'
                        ,data:'id='+obj.data.id
                        ,dataType:'json'
                        ,success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                table.reload('demo');
                            }
                        }
                    })
                    layer.close(index);
                })

            }
        });
        //---修改功能  start------
        form.on('submit(update)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:'${pageContext.request.contextPath}/admin/update'
                ,data:$("#updateForm").serialize()
                ,dataType:'json'
                ,success:function(result){
                    if(result.flag){

                        //隐藏修改弹出层
                        layer.closeAll();
                        //提示修改层
                        layer.msg("修改成功!!!!");
                        //表格重载
                        table.reload("demo")
                    }
                }
            })
            return false;
        });
        //    ------修改功能结束--------

    });
</script>
</body>
</html>
